<template>
	<EPopup
        @input="onChange"
		:value="value"
		@touchmove.stop.prevent="stopScrolling"
		:safeAreaInsetBottom="true"
		mode="bottom"
		:border-radius="24"
		:maskCloseAble="true"
        background="#F8F8FE"
		:closeable="true"
		closeIcon="/static/icon/img_tuan_close@3x.png"
		:closeIconSize="40"
		:customView="true"
	>
		<view class="select-popup">
			<scroll-view scroll-y class="scroll-view">
                <view class="group-wapper" v-for="item in listData" :key="item.id">
                    <groupItem 
						:itemObj="item" 
						:customStyle="groupStyle"
						:detailInfo="detailInfo"
						:productInfo="productInfo"
						:isTandianFull="isTandianFull"
						:isExpire="isExpire"
					/> 
                </view>
            </scroll-view>
		</view>
	</EPopup>
</template>

<script>
import EPopup from '@/components/EPopup/EPopup';
import groupItem from './groupItem';
export default {
	name: 'allGroupPopup',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		listData: {
			type: Array,
			default: () => []
		},
		detailInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		productInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},

		isTandianFull: {
			type: Boolean,
			default: false
		},
        isExpire: {
			type: Number,
			default: 0 // 是否在有效期内 0-在;1-不在
		}
	},

	watch: {},
	components: {
		EPopup,
        groupItem
	},
	data() {
		return {
            groupStyle: {background: '#fff',padding: '32rpx 28rpx',borderRadius: '24rpx'}
        };
	},
	methods: {
		onChange(e) {
			this.$emit('input', e);
		},
		onCancel() {
			this.$emit('input', false);
		},
		sureChoose() {
			this.onCancel();
			this.$emit('clickSure');
		},
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		}
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';

.select-popup{
	width: 100%;
	padding: 20rpx 20rpx 20rpx;
	height: 70vh;
    overflow-y: scroll;
	border-radius:0 0 24rpx 24rpx;
    background: #F8F8FE;
    position: relative;
    background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_2d553b2f07d9431eacf9d84ca96ea3dc.png) no-repeat;
    background-size: 100% 240rpx;
    @include Db_iosBottomDistance(10rpx);
    .scroll-view {
        height: calc(100% - 110rpx);
        margin-top: 100rpx;
		border-radius: 24rpx;
        .group-wapper{
            margin-bottom: 20rpx;
        }
        .group-style{
            background: #fff;
            margin-bottom: 20rpx;
        }
    }
}
// .scroll-view::after{
//     content: '';
//     position: absolute;
// 	top: -48rpx;
//     right: 100rpx;
//     background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_c759d1fd483d43318337bc114388ef42.png);
//     width: 148rpx;
//     height: 202rpx;
//     background-size: 100%;
// }
// .select-popup::before{
//     content: '';
//     position: absolute;
//     top: 0;
//     left: 0;
//     // todo 切换图片环境
//     background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_2d553b2f07d9431eacf9d84ca96ea3dc.png);
//     width: 100%;
//     height: 240rpx;
//     background-size: 100%;
// }

</style>
